<template>
  <div v-show="this.$store.state.isShowAll" class="searchUser">
    <h2>查询用户</h2>
    <el-form :inline="true">
      <el-form-item>
        <el-input v-model="searchData" placeholder="id/用户名/权限"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="searchUser">查询</el-button>
      </el-form-item>
    </el-form>
    <h2>结果</h2>
    <!--      content: ""-->
    <!--      createTime: "asd"-->
    <!--      id: 8-->
    <!--      imgId: "x"-->
    <!--      tag: (...)-->
    <!--      title: "asdasd"-->
    <!--      updateTime: "asd"-->
    <!--      userId: 1-->

    <el-table
        :data="tableData"
    >

      <el-table-column
          label="id"
      >
        <template slot-scope="scope">
          <i class="el-icon-user"></i>
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column
          label="用户名"
      >
        <template slot-scope="scope">

          <span style="margin-left: 10px">{{ scope.row.userName }}</span>
        </template>

      </el-table-column>


      <el-table-column
          label="密码"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.passWord }}</span>
        </template>

      </el-table-column>


      <el-table-column
          label="权限"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.authority }}</span>
        </template>

      </el-table-column>


      <el-table-column
          label="头像"
      >
        <template slot-scope="scope">
          <el-image :src="scope.row.userIcon" fit="contain" style="width: 50px; height: 50px"></el-image>
        </template>

      </el-table-column>


      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini"
                     @click="goUpdate(scope.row)"
          >编辑
          </el-button>
          <el-button disabled size="mini"
                     type="danger"
                     @click="goDelet(scope.row)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<style scoped>
.searchUser {
  display: flex;
  flex-flow: column;
  align-items: center;
}

.el-table {
  width: 70%;
}

@media screen and (max-width: 768px) {
  .el-table {
    width: 100%;
  }

}

</style>
<script>
export default {
  name: 'SearchUser',
  data() {
    return {
      searchData: '',
      tableData: []

    }

  },
  methods: {
    searchUser() {
      let postData = {
        token: this.$store.state.userToken,
        Condition: this.searchData
      }
      let url = 'http://shilezhi.club:8082/Api/User/search'
      console.log(JSON.stringify(postData))
      this.axios.defaults.withCredentials = true;
      this.axios.defaults.headers.post["Content-Type"] =
          "application/json;charset=utf-8";

      this.axios.post(url, JSON.stringify(postData)).then(
          response => {
            if (response.data.code === 'ok') {
              this.tableData = response.data.UserList
            } else {
              this.$message.warning(response.data.info)
            }
          }, err => {
            console.log(err)
          }
      )
    },
    goUpdate(user) {
      this.$router.push({name: 'ChangeUser', params: {user: user}})

    }

  }
}
</script>